<script setup lang="ts">
import { ref } from 'vue'
import RequestDemo from './components/RequestDemo.vue'
import LogStreamer from './components/LogStreamer.vue'

// 控制显示哪个组件
const activeTab = ref('task')
</script>

<template>
  <div class="app-container">
    <header>
      <h1 style="text-align: center; margin: 20px 0;">Python-Vue交互演示</h1>
    </header>

    <!-- 标签页导航 -->
    <div class="tab-navigation">
      <button
        :class="{ active: activeTab === 'task' }"
        @click="activeTab = 'task'"
      >
        任务管理
      </button>
      <button
        :class="{ active: activeTab === 'logs_server' }"
        @click="activeTab = 'logs_server'"
      >
        日志流
      </button>
    </div>

    <!-- 功能展示区 -->
    <main class="content-area">
      <!-- 任务管理组件 -->
      <div v-if="activeTab === 'task'">
        <RequestDemo />
      </div>

      <!-- 日志流组件 -->
      <div v-else-if="activeTab === 'logs_server'">
        <LogStreamer />
      </div>
    </main>
  </div>
</template>

<style scoped>
.app-container {
  min-height: 100vh;
}

header {
  line-height: 1.5;
}

.tab-navigation {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  gap: 10px;
}

.tab-navigation button {
  padding: 12px 24px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.tab-navigation button:hover {
  background-color: #e0e0e0;
}

.tab-navigation button.active {
  background-color: #4CAF50;
  color: white;
  border-color: #4CAF50;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.content-area {
  padding: 0 20px 20px;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
    flex-direction: column;
  }
}
</style>
